<template>
  <Drawer :visible="visible" title="云商店订单操作详情" size="large" @close="handleCancel">
    <template #footer>
      <a-space>
        <Button @click="handleCancel">取消</Button>
      </a-space>
    </template>
    <Form :model="form" label-width="150px">
      <Divider orientation="left">订单信息</Divider>
      <Row>
        <Col :span="12">
          <FormItem label="云商店订单ID">
            <span>{{ form.orderId }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="华为云Domain ID">
            <span>{{ form.customerId }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="云商店业务ID">
            <span>{{ form.businessId }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="云商店产品ID">
            <span>{{ form.productId }}</span>
          </FormItem>
        </Col>
      </Row>
      <Divider orientation="left">应用套餐订阅信息</Divider>
      <Row>
        <Col :span="12">
          <FormItem label="应用名称">
            <span>{{ form.appName }}</span>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="套餐类型">
            <span>{{ form.packageType }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="云商店产品规格标识">
            <span>{{ form.skucode }}</span>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="云商店产品标识">
            <span>{{ form.productId }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="套餐过期时间">
            <span>{{ form.expireTime }}</span>
          </FormItem>
        </Col>
      </Row>
      <Divider orientation="left">套餐实例部署信息</Divider>
      <Row>
        <Col :span="12">
          <FormItem label="套餐实例ID">
            <span>{{ form.orderInstanceId }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="回调操作">
            <span>{{ form.activity }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="实例状态">
            <span>{{ instanceStatusMap[form.instanceStatus] }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="订单状态">
            <span>{{ orderStatusMap[form.status] }}</span>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, reactive, watch } from 'vue';
import { Form, Drawer, FormItem, Button, Row, Col, Divider } from 'ant-design-vue';
import { CmOrderActionDetailResult } from '/@/api/integrated-center/model/integratedModel';
import { getCmOrderActionDetail } from '/@/api/integrated-center/integrated';
import { instanceStatusMap, orderStatusMap } from '/@/views/integrated-center/cm-order-action/data';

let props = defineProps({
  visible: Boolean,
  cmOrderActionId: String,
});

let propsRef = reactive(props);

const form = ref<Partial<CmOrderActionDetailResult>>({});
const emit = defineEmits(['close']);

const handleCancel = function () {
  emit('close', 'close');
};

async function getDetail() {
  form.value = await getCmOrderActionDetail({
    id: props.cmOrderActionId ? props.cmOrderActionId : '', 
  });
}

watch(propsRef, (newValue) => {
  if (newValue.visible) {
    getDetail();
  }
});
</script>
